<#--@ftlvariable name="htmlName" type="java.lang.String"-->
<#--@ftlvariable name="hobbies" type="java.util.List"-->
<#--@ftlvariable name="hobby" type="nxu.it.entity.Hobby"-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎登录</title>
    <style type="text/css">
        .field {
            margin: 1em;

        }

        h2 {
            margin: 1em;
            color: darkcyan;
        }
        a{
            color: blue;
        }

        h3 {
            margin: 1em;
            color: red;
        }
    </style>
    <script src="/jquery.min.js"></script>
    <script>
        //参数检验
        function sumbitCheck(){
            var username = document.getElementById("username");
            var password = document.getElementById("password");
            var chapter = document.getElementById("chapter");
            var loginForm = document.getElementById("loginForm");
            loginForm.submit();
            console.log(chapter.value)
            //这里填写对条件的检验
            if(chapter.value.length===4){
                loginForm.submit();
            }else{
                alert("信息填写错误，请重试")
            }
            return false;
        }

        // function login(){
        //     $.ajax({
        //         type:"post",
        //         url:"/loginCheck",
        //         data:{
        //             username:$("#username").val(),
        //             password:$('#password').val()
        //         },
        //         success: function(response){
        //             $("#errorMessage").html(response.errorMessage)
        //             if (response.redirectUrl){
        //                     window.location.url=response.redirectUrl;
        //             }
        //         },
        //         }
        //     )
        // }
        window.onload=function(){
            //获取img标签的对象
            var img = document.getElementById("chapterImg");
            img.onclick=function(){
                //加时间戳,避免缓存问题
                var date=new Date().getTime()
                img.src="/doChapter?"+date;
            }
        }
    </script>
</head>

<body>


<h2>
    欢迎登录
</h2>

<h3>
    <#if message??>
        ${message}
    </#if>
</h3>

<div id="errorMessage">

</div>
<form action="/doLogin" method="post" autocomplete="off"  id="loginForm">
    <div class="field">
        <label>
            <span>账号</span>
            <input type="text" name="sno" id="username" required/>
        </label>
    </div>

    <div class="field">
        <label>
            <span>密码</span>
            <input type="password" name="password" id="password" required/>
        </label>
    </div>
    <div class="field">
        <span>验证</span>
        <input type="text" name="chapter" id="chapter" required > <img  id="chapterImg" src="/doChapter" width="60" align="center"/>
    </div>

    <div class="field">
<#--        <a  id="submit" onclick="sumbitCheck()">提交</a>-->
<#--        <a  id="submit" onclick="sumbitCheck()">提交</a>-->
        <input type="submit" id="submit">
    </div>
</form>

</body>
</html>